<template>
    <div class="type-best">
        <div class="img-box">
            <img :src="detail.elements[0].url + '?x-oss-process=image/quality,q_50'" alt="">
            <div class="jx-msg-box">
                <div class="jx-flex">
                    <div class="icon">
                        <img :src="detail.elements[0].appIcon" alt="">
                    </div>
                    <div class="content">
                        <div class="jx-title">
                            <span class="title">{{detail.elements[0].appName || '游戏名称'}}</span>
                            <span class="num-box">
                                <span class="num-icon"></span>
                                <span class="num">{{detail.elements[0].appScore || '9.9'}}</span>
                            </span>
                        </div>
                        <div class="jx-desc">{{detail.elements[0].appTitle || '游戏副标题'}}</div>
                    </div>
                </div>
                <div class="bottom-box"></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    // 精选 1000
    name: 'model1000',
    props: ['data'],
    data () {
        return {
            detail: {
                elements: [
                    {
                        url: '',
                        appIcon: '',
                        appName: '游戏名称',
                        appScore: '9.9',
                        appTitle: '游戏副标题'
                    }
                ]
            }
        }
    },
    created () {
        if (this.data && this.data.elements && this.data.elements.length) {
            this.detail = this.data
        }
    },
    watch: {
        data: {
            handler: function (val) {
                if (val && val.elements && val.elements.length) {
                    this.detail = val
                }
            },
            deep: true
        }
    }
}
</script>

<style lang="scss">
    .type-best {
        // padding: 16px 16px 0;
        border-bottom: none;
        .img-box {
            position: relative;
            top: 0;
            left: 0;
            z-index: 1;
            height: 480px;
            // border-radius: 6px;
            background-color: #ddd;
            > img {
                width: 100%;
                object-fit: cover;
                height: 100%;
            }
            .jx-msg-box {
                position: absolute;
                bottom: 0;
                left: 0;
                z-index: 1;
                width: 100%;
                height: 196px;
                padding-top: 87px;
                background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%);
                .jx-flex {
                    height: 48px;
                    margin: 0 16px;
                    display: flex;
                    .icon {
                        width: 48px;
                        height: 48px;
                        border-radius:8px;
                        margin-right: 12px;
                        overflow: hidden;
                        background-color: rgb(246, 197, 68);
                        > img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .content {
                        flex: 1;
                        // padding: 6px 0;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        .jx-title {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            .title {
                                // flex:1;
                                width: 185px;
                                font-size:16px;
                                font-family:SourceHanSansCN-Medium,SourceHanSansCN;
                                font-weight:500;
                                color:rgba(255,255,255,1);
                                line-height:24px;
                                overflow: hidden;
                                text-overflow:ellipsis;
                                white-space: nowrap;
                            }
                            .num-box {
                                display: flex;
                                align-items: center;
                                .num-icon {
                                    width: 14px;
                                    height: 14px;
                                    margin-right: 5px;
                                    background-image: url('./img/jx-icon.png');
                                    background-size: 100% 100%;
                                }
                                .num {
                                    font-size:20px;
                                    font-family:Roboto-BoldItalic,Roboto;
                                    font-weight:normal;
                                    color:rgba(255,255,255,1);
                                    line-height:24px;
                                }
                            }
                        }
                        .jx-desc {
                            width: 185px;
                            font-size:14px;
                            font-family:SourceHanSansCN-Normal,SourceHanSansCN;
                            font-weight:400;
                            color:rgba(255,255,255,.6);
                            line-height:21px;
                            overflow: hidden;
                            text-overflow:ellipsis;
                            white-space: nowrap;
                        }
                    }
                }
                .bottom-box {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    z-index: 1;
                    height: 45px;
                    width: 100%;
                    background-color: #ffffff;
                    border-radius:16px 16px 0px 0px;
                }
            }
        }
    }
</style>
